<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<!--[if !IE]> -->
<script src="{$__WEBPATH__}/static/roubSite/js/jquery-2.1.4.min.js"></script>

<!-- <![endif]-->

<!--[if IE]>
<script src="{$__WEBPATH__}/static/roubSite/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script src="{$__WEBPATH__}/static/roubSite/echarts/echarts.min.js"></script>
<!-- 引入 vintage 主题 -->
<script src="{$__WEBPATH__}/static/roubSite/echarts/theme/vintage.js"></script>
<style type="text/css">
.pan {
	width: 450px;
	height: 450px;
	float:left;
}
</style>
<title></title>
</head>
<body>
	<div id="cpu" class="pan"></div>
	<div id="mem" class="pan"></div>
	<script>
		var cpuChar = echarts.init(document.getElementById('cpu'), 'vintage');
		var memChar = echarts.init(document.getElementById('mem'), 'vintage');
		var option = {
			tooltip : {
				formatter : "{a} <br/>{b} : {c}%"
			},
			toolbox : {
				feature : {
					restore : {},
					saveAsImage : {}
				}
			},
			series : [ {
				name : '比例',
				type : 'gauge',
				detail : {
					formatter : '{value}%'
				},
				data : [ {
					value : 50,
					name : 'CPU占用率'
				} ]
			} ]
		};

		setInterval(function() {
			getSysInf();
		}, 2000);
	</script>
	<script type="text/javascript">
		function getSysInf() {
			$.ajax({
				url : "{$__WEBPATH__}/codeSign/code/getSystemInfo",
				dataType : "json",
				success : function(res) {
					option.series[0].data[0].value = res.cpu;
					option.series[0].data[0].name = "CPU占用率";
					cpuChar.setOption(option, true);
					var menB = (res.usedMem / res.totalMem * 100).toFixed(2)
					option.series[0].data[0].value = menB;
					option.series[0].data[0].name = "内存占用率";
					memChar.setOption(option, true);
				}
			});
		}
	</script>
	<script>
		$(function() {
			getSysInf();
		});
	</script>
</body>
</html>
